<template>
    <view class="weather-container">
       
        <view class="weather-item today">
            今天：{{ todayWeather }}
        </view>
        <view class="weather-item tomorrow">
            明天：{{ tomorrowWeather }}
        </view>
        <button @click="getWeather" style="width: 80%; margin-top: 20rpx;">获取天气信息</button>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                todayWeather: "",    
                tomorrowWeather: ""  
            }
        },
        methods: {
            getWeather() {
                
                uni.request({
                    url: "http://t.weather.sojson.com/api/weather/city/101230501",
                    success: (res) => {
                        if (res.data.status == 200) {
                           
                            const city = res.data.cityInfo.city;
                            const todayRealTemp = res.data.data.wendu; 
                            const todayPM25 = res.data.data.pm25;
                            
                            const todayForecast = res.data.data.forecast[0];
                            const todayDate = todayForecast.ymd;
                            const todayWeek = todayForecast.week;
                            const todayWeatherType = todayForecast.type;
                            
                            const tomorrowForecast = res.data.data.forecast[1];
                            const tomorrowDate = tomorrowForecast.ymd;
                            const tomorrowWeek = tomorrowForecast.week;
                            const tomorrowWeatherType = tomorrowForecast.type;
                            
                            const tomorrowHighTemp = tomorrowForecast.high.replace("最高", "");
                            const tomorrowLowTemp = tomorrowForecast.low.replace("最低", "");
                            
                            this.todayWeather = 
                                `${todayRealTemp}℃ ${todayWeatherType} ${city} PM${todayPM25}`;
                            
                            this.tomorrowWeather = 
                                `${tomorrowDate}（${tomorrowWeek}）${tomorrowWeatherType} 
                                ${tomorrowLowTemp}~${tomorrowHighTemp}℃`;
                        }
                    },
                    fail: () => {
                        uni.showToast({ 
                            title: '获取天气信息失败，请重试', 
                            icon: 'none' 
                        });
                    }
                });
            }
        }
    }
</script>

<style>
.weather-container {
    padding: 30rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
}

.weather-item {
    width: 80%;
    padding: 20rpx;
    margin-top: 15rpx;
    font-size: 28rpx;
    border-radius: 10rpx;
}

.today {
    background-color: #e6f7ff;
    border: 1px solid #91d5ff;
}

.tomorrow {
    background-color: #fff6e6;
    border: 1px solid #ffcc99;
}
</style>